<template>
  <div id="videoSortIndex">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:videosTops:remove'"
        type="warning"
        @click="delWatchAll()"
      >
        取消观看
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="490"
      ref="table"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="观看时间"
        prop="settingWatchDate"
        width="150"
      ></el-table-column>
      <el-table-column label="观看类别" prop="type" min-width="100">
        <template slot-scope="scope">
          <span class="tag-span primary" v-if="scope.row.type === 'WORKS'"
            >作品</span
          >
          <span v-else>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="大鹏号"
        prop="dpAccount"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="发布人"
        prop="nickname"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="发布时间"
        prop="submitTime"
        min-width="180"
      ></el-table-column>
      <el-table-column
        label="小视频内容"
        prop="workContent"
        :show-overflow-tooltip="true"
        min-width="160"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.workContent">{{ scope.row.workContent }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="视频预览" min-width="120">
        <template slot-scope="scope">
          <span class="img-box" @click="videoPlay(scope.row.videoId)">
            <div class="img-inner-box">
              <el-image fit="contain" :src="scope.row.videoImg"></el-image>
            </div>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="分享数"
        prop="shareAmount"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="点赞数"
        prop="praiseNumber"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="评论数"
        prop="commentNumber"
        min-width="120"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            v-permission="'wh:system:videosTops:detail'"
            type="text"
            @click="showDetail(scope.row)"
          >
            查看详情
          </el-button>
          <el-button
            v-permission="'wh:system:videosTops:remove'"
            type="text"
            @click="delWatch(scope.row.workId)"
          >
            取消观看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <dialogDetailCom
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
    ></dialogDetailCom>
    <showVideo v-if="videoData.isShow" :video-data="videoData"></showVideo>
  </div>
</template>

<script>
import {
  getSearchList,
  batchRemove,
  deleteReq
} from '@/api/placingOrder/videoSort' // 接口
import topSearch from '@component/placingOrder/videoSort/topSearch' // 上部搜索条件
import dialogDetailCom from '@common/dialogDetailCom' // 详情-弹窗-公共组件
import showVideo from '@common/showVideo'
import { getVideoImg } from '@utils/getFaceImg'
import { getVideoPara } from '@utils/pubFunction'
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'show',
  msg: '小视频观看排序管理',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    dialogDetailCom,
    showVideo
  },
  data() {
    return {
      loading: true,
      total: 0,
      tableData: [], // table内容
      tableTemp: [], // table中转内容
      tempSize: 0, // 当前页面显示数据条数
      formInline: {
        // 搜索条件
        keyType: '', // 类型
        keyWord: '', // 搜索关键字
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      dialogData: {
        isShow: false, // 默认隐藏
        id: '', // 编辑时，传递的参数
        type: ''
      },
      videoData: {
        isShow: false,
        videoId: ''
      },
      sortData: {
        isShow: false, // 默认隐藏
        num: 0
      },
      multipleSelection: [],
      powerStr: 'system:videosTops:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false, // 是否显示当前页面
      polivNum: {
        polyvUserId: '',
        polyvSecretKey: ''
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        }
      })
    },
    /* 获取系统配置-保利威视 */
    getPolivNum() {
      let _this = this
      getVideoPara().then(
        (res) => {
          // 接口请求正常
          this.polivNum.polyvUserId = res.polyvUserId
          this.polivNum.polyvSecretKey = res.polyvSecretKey
          this.tableTemp.forEach((item, index) => {
            _this.tableTemp[index].videoImg = ''
            _this.getImg(item.videoId, index)
          })
        },
        (res) => {
          // 接口请求不正常正常
          this.loading = false
          _this.tableData = [..._this.tableTemp]
        }
      )
    },
    /* 获取封面图 */
    getImg(videoId, index) {
      let _this = this
      getVideoImg(videoId, this.polivNum).then(
        (res) => {
          _this.tableTemp[index].videoImg = res
          if (index === _this.tempSize - 1) {
            setTimeout(() => {
              // console.log('赋值')
              this.loading = false
              _this.tableData = [..._this.tableTemp]
            }, 100)
          }
        },
        (res) => {
          // 接口请求不正常
          this.loading = false
          _this.tableData = [..._this.tableTemp]
        }
      )
    },
    /* 播放视频 */
    videoPlay(vid) {
      /* console.log("index-vid=" + vid); */
      if (!vid) {
        this.$message.warning('无视频资源！')
        return
      }
      this.videoData.vid = vid
      this.videoData.isShow = true
    },
    /* 获取列表 */
    searchList() {
      this.tableData = []
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      getSearchList(
        obj,
        (response) => {
          this.loading = false
          this.total = response.total
          this.tableTemp = response.rows
          this.tableData = response.rows
          this.tempSize = response.rows.length
          this.getPolivNum()
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* table选择 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 取消观看-批量 */
    delWatchAll() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认删除这${this.multipleSelection.length}条数据?`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        this.multipleSelection.forEach((item) => {
          ids.push(item.workId)
        })
        let obj = { categoryIds: ids }
        batchRemove(obj, (response) => {
          this.searchList()
        })
      })
    },
    /* 取消观看-单个 */
    delWatch(ids) {
      this.$confirm('确定要取消观看吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = { categoryIds: ids }
        deleteReq(params, (response) => {
          this.searchList()
        })
      })
    },
    /* 显示详情 */
    showDetail(item) {
      this.dialogData.isShow = true
      this.dialogData.id = item.workId
      this.dialogData.type = item.type
      this.dialogData.title = '小视频前端展示池详情'
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#videoSortIndex {
  .img-box {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;

    .img-inner-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      text-align: center;

      .el-image {
        width: 100%;
        height: 100%;
      }

      img {
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
      }
    }

    .num {
      position: absolute;
      display: block;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 16px;
    }
  }
}
</style>
